import React, { useState, useEffect, useCallback } from 'react'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import { Search } from 'react-vant';
import { PullRefresh, List, Tabs, Cell } from 'react-vant'
import axios from '../../utils/index'
import style from './index.module.css'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const [isRefreshing, setIsRefreshing] = useState<boolean>(false)
    const aaa = async () => {
        const res = await axios.get('/api/yi')
        if (res.data.code == 200) {
            setList(res.data.yi)
            console.log(res.data.yi);
        }
    }
    useEffect(() => {
        aaa()
    }, [])

    const onLoad = useCallback(async () => {
        const res = await axios.get('/api/yi');
        setTimeout(() => {
            if (res.data.code === 200) {
                setList([...list, ...res.data.yi]);
            }
        }, 1000)
    }, [list]);

    const onRefresh = useCallback(async () => {
        setIsRefreshing(true);
        try {
            await aaa();
        } catch (error) {
            Toast.fail('刷新失败');
        } finally {
            setIsRefreshing(false);
        }
    }, []);
    return (
        <div>
            <NavBar
                title="在线咨询"
                onClickLeft={() => navigate(-1)}
            />
            <PullRefresh pullingText="下拉刷新" onRefresh={onRefresh} successText='刷新成功' >
                <Search clearable shape='round' placeholder="搜索医院、医生、科室、疾病" />

                <div className={style.tu}>
                    <img src="../src/assets/105_03.jpg" alt="" style={{ width: '100%' }} />
                </div>

                <div className={style.box}>
                    <div className={style.box1}>
                        <img src="../src/assets/105_07.jpg" alt="" style={{ width: '30px', height: '30px' }} />
                        <span className={style.bb}>名医工作室</span>
                        <p className={style.pp}>主任院长 顶级名医</p>
                    </div>
                    <div className={style.box1}>
                        <img src="../src/assets/105_09.jpg" alt="" style={{ width: '30px', height: '30px' }} />
                        <span className={style.bb}>爱心义诊</span>
                        <p className={style.pp}>问诊购药 送药到家</p>
                    </div>
                </div>
                <h1 style={{ marginTop: "10px", paddingLeft: '20px' }}>热门科室</h1>
                <div className={style.box2}>
                    <div className={style.box3}>
                        <img src="../src/assets/106_03.jpg" alt="" style={{ width: '50px' }} />
                        <p>妇产科</p>
                    </div>
                    <div className={style.box3}>
                        <img src="../src/assets/106_05.jpg" alt="" style={{ width: '50px' }} />
                        <p className={style.p1}>儿科</p>
                    </div>
                    <div className={style.box3}>
                        <img src="../src/assets/106_07.jpg" alt="" style={{ width: '50px' }} />
                        <p className={style.p1}>内科</p>
                    </div>
                    <div className={style.box3}>
                        <img src="../src/assets/106_09.jpg" alt="" style={{ width: '50px' }} />
                        <p className={style.p1}>外科</p>
                    </div>
                    <div className={style.box3}>
                        <img src="../src/assets/106_15.jpg" alt="" style={{ width: '50px' }} />
                        <p>皮肤科</p>
                    </div>
                    <div className={style.box3}>
                        <img src="../src/assets/106_16.jpg" alt="" style={{ width: '50px' }} />
                        <p>耳鼻喉科</p>
                    </div>
                    <div className={style.box3}>
                        <img src="../src/assets/106_17.jpg" alt="" style={{ width: '50px' }} />
                        <p>中医科</p>
                    </div>
                    <div className={style.box3}>
                        <img src="../src/assets/106_18.jpg" alt="" style={{ width: '50px' }} />
                        <p className={style.p1}>更多</p>
                    </div>
                </div>
                <h1 style={{ marginTop: "10px", paddingLeft: '20px' }}>名医推荐</h1>
                <hr />
                <List onLoad={onLoad} finishedText="没有更多了">
                    {
                        list.map((item, index) => (
                            <div key={index}>
                                <div className={style.uu}>
                                    <div>
                                        <img src={item.img} alt="" style={{ width: '80px', height: '80px', borderRadius: '50%', }} />
                                    </div>
                                    <div>
                                        <p><b style={{ fontSize: '20px' }}> {item.name}</b>{item.shen}</p>  <br />
                                        <p className={style.pp2}>{item.bei} {item.shen}</p><br />
                                        <p className={style.wen}>图文</p>

                                        <div className={style.feng}>
                                            <p>回复率 <span style={{ fontSize: "14px" }}>良好</span> </p><p>咨询 <span style={{ fontSize: "14px" }}>＜100人</span> </p>
                                            <button className={style.vvbtn}>￥1 咨询</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))
                    }
                </List>
            </PullRefresh>
        </div>
    )
}

export default Index
